<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Volton - Responsive Mobile Template</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/templatemo-style.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.5/themes/icon.css">
<script type="text/javascript" src="js/jquery-easyui-1.4.5/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>

<style type="text/css">
	#headdiv img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
	#headdiv img:hover{opacity: 0.5;}
	#headdiv p{position:absolute;top:55px;left: 31px;font-weight:bold;}
	#iframe{width: 100%;height:100%}
	#iframeout{width:100%; height:800px;margin:0px 0px 0px 0px;}
	.guanfen{float: left;width: 25%;text-align: center;position:relative ;right: 16px;margin-top:10px}
	.guanfen a{color: white;}
</style>
<script type="text/javascript">	
			function refresh(){
				location.reload()
			}
			function clearForm(){
				$('#ff').form('clear');
				$('#ff1').form('clear');	
				//$('#win').window('close');
				}
			//修改用户信息
			function modify(){
				$('#ff').form({
			    url:"user?method=modifyUser",
			    onSubmit: function(){
					return true;
			    },
			    success:function(d){
			    	$('#win').window('close');
			    	
			    	var json=eval("("+d+")")
			    	$.messager.show({
						title:'温馨提示',					
						msg:json.msg,
						timeout:0,
						showType:'slide'
					});
			    }
				});
				$("#ff").submit();
			}
			//修改用户头像
			function modifyhead(){
				var file = document.getElementById('fileb').files[0];
				console.log(file);
				var	formData = new FormData(document.getElementById('ff1'));
				//formData.append("imageFile",file);
				
				var httpRequest = new XMLHttpRequest();
				httpRequest.onreadystatechange = function(){
					if(httpRequest.readyState == 4 && httpRequest.status == 200){
						var json=eval("("+httpRequest.responseText+")");
						clearForm();
						$('#win1').window('close');
				    	$.messager.show({
							title:'温馨提示',					
							msg:json.msg,
							timeout:0,
							showType:'slide'
						});
				    	
					}
				};
				httpRequest.open("post","changeUhead.jsp",true);
				//httpRequest.setRequestHeader("Content-type","multipart/form-data");
				httpRequest.send(formData);

			}
			//页面加载完毕
	$(function(){
	
			var img=$("#headimg");		
				var pwd="";
				var imgSize=new Image();
				var width=0;
				var height=0;
				 $.ajax({	            	
	            	url:"user?method=getUmsg",
	            	dataType:"json",
	            	success:function(d){
	            		$("#guanzhu").text(d.list[0]);
	            		$("#fensi").text(d.list[1]);
	            		$("#nickname").text(d.obj.nickname);
	            		pwd=d.obj.pwd;	            	
	            		$("#area").text("区域："+d.obj.area);
	            		$("#score").text("积分："+d.obj.score);
	            		$("#level").text("等级："+d.obj.level);
	            		$("#headimg").attr("src",d.obj.userhead);           		
	            		imgSize.src=d.obj.userhead
						width=imgSize.width;
						height=imgSize.height;
						console.log(width+","+height);
						if(width>height){
							img.css("height","150px");
						}else{
							img.css("width","150px");
						}
						console.log(img.css("height"));
						console.log(img.css("width"));
						if(img.css("height")=="0px"||img.css("width")=="0px"){
				        	   refresh();
				          } 						
	            }            	
	            });
					$('#win1').window('close');
					$("#win").window("close");
					//打开修改用户信息窗口
					$("#btn").click(function(){
						$('#win').window('open');
						$("#gnickname").textbox("setValue",$("#nickname").text());
						$("#gpwd").textbox("setValue",pwd);
						$("#garea").combobox("setValue",$("#area").text().split("：")[1]);
						
					});
					//打开修改头像窗口
					$("#headdiv").click(function(){
						$("#win1").window("open");
					});
		
	})
			
</script>
</head>
<body>

<!-- SIDEBAR -->
<div class="sidebar-menu hidden-xs hidden-sm">
	<div class="top-section">
		<div id="headdiv" class="profile-image">
			<!--用户头像文件-->
			<p>点击修改头像</p>
			<img src="img/defaultUH.png" id="headimg" alt="Volton">
		</div>
		<h3 id="nickname" class="profile-title"></h3>
		<p id="score" class="profile-description"></p>
		<p id="level" class="profile-description"></p>
		<p id="area" class="profile-description"></p>
		<div class="guanfen"><p>关注</p><a id="guanzhu" target="Iframe" href="guanzhu.html"></a></div>
		<div class="guanfen"><p>粉丝</p><a id="fensi" target="Iframe" href="fensi"></a></div>
	</div> <!-- top-section -->
	<div class="main-navigation">
		<ul>
			<!-- 跳转a标签-->
			<li><a href="collection.html" target="Iframe"><i class="fa fa-folder"></i>我的收藏</a></li>
			<li><a href="history.html" target="Iframe"><i class="fa fa-h-square"></i>我的足迹</a></li>
			<li><a href="myfabu.html" target="Iframe"><i class="fa fa-paperclip"></i>我的帖子</a></li>
			<li><a href="myfriend.html" target="Iframe"><i class="fa fa-user"></i>站内好友</a></li>
			<li><p id="btn"><i class="fa fa-pencil"></i>信息修改</p></li>
			
		</ul>
	</div> <!-- .main-navigation -->

</div> <!-- .sidebar-menu -->


	


<!-- MAIN CONTENT -->
<div class="main-content" style="height:800px">
	
	
		<div id="iframeout">
		<iframe id="iframe" name="Iframe" frameborder='0' scrolling="auto"></iframe>
		</div>
		
		<div id="win" class="easyui-window" title="信息修改" style="width:500px;height:300px" data-options="onClose:function(){clearForm()}">
		 <form id="ff" method="post">
	    	<table cellpadding="5">
	    		<tr>
	    			<td>昵称:</td>
	    			<td><input class="easyui-textbox" type="text" name="nickname" id="gnickname" ></input></td>
	    		</tr>
	    		<tr>
	    			<td>密码:</td>
	    			<td><input class="easyui-textbox" type="text" name="pwd" id="gpwd" ></input></td>
	    		</tr>
	    		<tr>
	    			<td>地区:</td> 
	    			<td><select id="garea" class="easyui-combobox" name="area" style="width:200px;">
	    				<option>海曙区</option>
    					<option>鄞州区</option>
    					<option>江北区</option>
    					<option>北仑区</option>
    					<option>镇海区</option>
	    			</select></td>
	    		</tr>		
	    	</table>
	    </form>
	    <div style="text-align:center;padding:5px">
	    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="modify()">提交</a>
	    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重填</a>
	    </div>
	</div>
	
	<div id="win1" class="easyui-window" title="信息修改" style="width:500px;height:300px" data-options="onClose:function(){clearForm()}">
			<p>请上传头像文件</p>
			<form id="ff1" enctype="multipart/form-data" method="post">
	  			<!-- <input id="fileb" name="fileb" type="file"/> -->
	  			<input id="fileb" class="easyui-filebox" style="width:300px" name ="fileb"></input>
	  	  	</form>
	   		 <div style="text-align:center;padding:5px">
	    		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="modifyhead()">提交</a>
	    		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重填</a>
	   		 </div>
		</div>
</div>





</body>
</html>